<template>
  <div>
    <customSearch ref="customSearch" placeholder="请输入企业名称" title="企业列表" :total="total" :is-super-search="false" @search="handleSearch" />
    <!--    <el-alert :title="title" type="warning" class="mb-1" :closable="false" />-->
    <div class="listInner">
      <div v-if="listData.length > 0" class="common_list">
        <div v-for="(item, index) in listData" :key="index" class="list_item" @click="goToDetails(item)">
          <div class="content_area">
            <div class="number_order">{{ index + 1 }}</div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.item1 }}
                <van-tag plain :type="'primary'" class="text-center" style="display: block"> {{ item.companyName }}</van-tag>
              </div>
              <ul>
                <li>
                  <i class="iconfont c-text-color1">&#xe8d5;</i>
                  <div class="label">完成状态：</div>
                  <div class="value">{{ item.finishedState === '-'?'/':item.finishedState }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color2">&#xe8d5;</i>
                  <div class="label">检查得分：</div>
                  <div class="value">{{ item.score === '-'?'/':item.score }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color3">&#xe634;</i>
                  <div class="label">企业评分：</div>
                  <div class="value">{{ item.mark === '-'?'/':item.mark }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color4">&#xe685;</i>
                  <div class="label">评分时间：</div>
                  <div class="value">{{ item.scoreTime === '-'?'/':item.scoreTime }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color5">&#xe685;</i>
                  <div class="label">检查人员：</div>
                  <div class="value">{{ item.expertName === '-'?'/':item.expertName }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="formInline.pageNum" :pages="pages" @load="handlePages" />
      <van-popup
        v-model="companyListDetailsShow"
        get-container="body"
        position="right"
        :style="{ width: '100%', height: '100%', backgroundColor: '#e6edf5' }"
        closeable
        close-icon="arrow-left"
        close-icon-position="top-left"
        lock-scroll
        safe-area-inset-bottom
        close-on-popstate
        class="custom-van-pop custom-van-pop__container"
      >
        <div class="pop-title">企业检查详情</div>
        <div class="pop-vertical-flex" style="height: calc(100% - 45px)">
          <div class="pop-content">
            <companyListDetails v-if="companyListDetailsShow" :check-company="checkCompany" />
          </div>
        </div>
      </van-popup>

    </div>
  </div>
</template>
<script>
import companyListDetails from './companyListDetails.vue'
import commonList from '@/assets/mixin/commonList'
import { planDangersCheckTaskDetails, checkTaskCompanyList } from '@/api/commonPage/dangerTreatment'

export default {
  components: {
    companyListDetails
  },
  mixins: [commonList],
  props: {
    checkTeam: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      companyListDetailsShow: false,
      checkCompany: '',
      formInline: {
        pageNum: 1,
        pageSize: 10,
        companyName: '',
        checkTeamId: '',
        checkTaskId: this.$route.query.checkTaskId,
        moduleName: ''
      },
      pages: 0,
      total: 0,
      listData: [],
      title: '截至当前，已完成检查企业0家，未完成检查企业0家。'
    }
  },
  computed: {

  },
  mounted() {
    this.formInline.checkTeamId = this.checkTeam.checkTeamId
    this.formInline.moduleName = this.checkTeam.moduleName === '环保节能' ? '环保' : this.checkTeam.moduleName
    this.checkTaskCompanyList()
    // this.getTitle()
  },
  methods: {
    // 获取列表数据
    async checkTaskCompanyList() {
      this.layout.showLoading()
      this.$refs.customLoadmore.loadStatus = true
      const { status, data } = await checkTaskCompanyList(this.formInline)
      if (status === 0 && data) {
        this.total = data.total
        this.listData = this.listData.concat(data.list)
        this.pages = data.pages
      }
      this.layout.hideLoading()
      this.$refs.customLoadmore.loadStatus = false
    },
    openCompanyListDetailsPopup() {
      this.companyListDetailsShow = true
    },
    // 企业名称查询
    handleSearch(value) {
      this.formInline.companyName = value
      this.formInline.pageNum = 1
      this.listData = []
      this.checkTaskCompanyList()
    },
    handlePages(value) {
      this.formInline.pageNum = value
      this.checkTaskCompanyList()
    },
    // 进入企业详情
    goToDetails(item) {
      item.moduleName = this.checkTeam.moduleName === '环保节能' ? '环保' : this.checkTeam.moduleName
      this.checkCompany = item
      setTimeout(() => {
        this.companyListDetailsShow = true
      }, 500)
    },
    // 基本信息
    async getTitle() {
      const { data, status } = await planDangersCheckTaskDetails({
        checkTaskId: this.$route.query.checkTaskId
      })
      if (status === 0 && data) {
        this.title = '截至当前，' + data.dangersNumDesc + '，' + data.taskScheduleDesc
      }
    }
  }
}
</script>
<style scoped lang="scss">
.custom-van-pop {
  background: url("~@/assets/images/wapper.png") no-repeat;
  .pop-title {
    color: #fff;
    text-align: center;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: 0.46667rem;
    font-weight: bold;
  }
  .pop-content {
    background-color: #fff;
    margin: 0 0rem ;
  }
  ::v-deep .van-popup__close-icon {
    color: #fff;
  }
}
.custom-van-pop__container {
  display: flex;
  flex-direction: column;
}
</style>
